<template>
	<div>details+summary实现折叠菜单功能+获取多个DOM元素</div>
	<div>Vue3获取Dom元素</div>
	<details open ref="myRef">
		<summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
		<dl>
			<dt>Transfer rate:</dt>
			<dd>452KB/s</dd>
			<dt>Local filename:</dt>
			<dd>/home/rpausch/raycd.m4v</dd>
			<dt>Remote filename:</dt>
			<dd>/var/www/lectures/raycd.m4v</dd>
			<dt>Duration:</dt>
			<dd>01:16:27</dd>
			<dt>Color profile:</dt>
			<dd>SD (6-1-6)</dd>
			<dt>Dimensions:</dt>
			<dd>320×240</dd>
		</dl>
	</details>
	<h3>{{openStatus}}</h3>

	<div>details+summary配合简单的过渡跟选择器，就能够轻松实现折叠菜单功能，非常方便</div>
	<section id="section">
		<details id="details">
			<summary id="summary">水果列表</summary>
		</details>
		<ul>
			<li>百事可乐</li>
			<li>维他奶</li>
			<li>矿泉水</li>
			<li>苏打水</li>
			<li>冰红茶</li>
		</ul>
	</section>

	<div>获取多个DOM元素</div>
	<ul>
		<li v-for="(item, index) in arr" :key="index" :ref="setRef">
			{{ item }}
		</li>
	</ul>
</template>

<script>
	//<details> 就是一个展示附加内容的原生组件。而 <summary> 则是承载 <details> 附加内容的标签。
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	export default {
		//Vue3获取Dom元素
		//1.dom上写上ref 2setup函数内部写上ref 3retrun 出来（重点）
		setup() {
			const myRef = ref(null);
			var openStatus = ref('init...')

			const arr = ref([1, 2, 3,4]);
			// 把多个元素存储dom数组
			const myRefArr = ref([]);//创建一个空的响应式数组
			const setRef = (el) => {
				myRefArr.value.push(el)
			}
			nextTick(() => {
				console.log('nextTick', myRefArr.value)
				console.dir(myRefArr.value)
			})

			onMounted(() => {
				console.log('myRef',myRef, myRef.value);
				var details = myRef.value
				console.dir(details) //console.dir()可以显示一个对象所有的属性和方法
				details.addEventListener("toggle", event => {
					console.log("toggle", details.open, details['open'])
					openStatus.value = details.open ? 'opened status' : 'closed status';
				})
			});
			return {
				myRef,
				openStatus,
				arr,
				setRef,
			};
		},
		data() {
			return {}
		},
		mounted() {
			this.nextTickTest();

		},
		methods: {
			//nextTick 最核心的实现就是：拿一个队列存储所有要执行的任务，在下一个tick（异步）执行这些任务
			nextTickTest() {
				console.log('after')
				// this.getEl
			},

		},

	}
</script>

<style scoped="scoped">
	html,
	body,
	details,
	summary {
		margin: 0;
		padding: 0
	}


	html,
	body {
		color: #fff;
	}

	details,
	summary {
		outline: none;
	}

	ul {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 35px;
	}

	li {
		cursor: pointer;
		margin: 10px 0;
	}

	section,
	details {
		width: 300px;
		margin: 50px auto 0;
		cursor: pointer;
		background: rgba(255, 0, 0, .25);
	}

	summary {
		padding: 16px;
		display: block;
		background: rgba(255, 0, 0, .55);
		padding-left: 35px;
		position: relative;
		cursor: pointer;
	}

	summary::before {
		content: '';
		border-width: .4rem;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
		position: absolute;
		top: 21px;
		left: 16px;
		transform: rotate(0);
		transform-origin: 3.2px 50%;
		transition: .25s transform ease;
	}

	/* details[open]获取打开详情的标签状态 */
	details[open]>summary::before {
		transform: rotate(90deg);
	}

	details+ul {
		max-height: 0;
		transition: max-height .5s;
		overflow: hidden;
	}

	details[open]+ul {
		max-height: 260px;
	}
</style>
